<template>
  <div>
    <div>
      <el-form inline>
        <el-form-item label="日期选择" style="width:310px">
          <el-date-picker @clear="getTableList" clearable type="daterange" range-separator="至" start-placeholder="开始时间"
            end-placeholder="结束时间" value-format="YYYY-MM-DD" placeholder="请选择创建时间" v-model="searchFrom.createdAt"
            @change="dateChange" />
        </el-form-item>
        <el-form-item label="控制方式" style="width:220px">
          <el-select @clear="getTableList" clearable clear-table v-model="searchFrom.operatePlatform"
            placeholder="请选择控制方式">
            <el-option :label="item.label" :value="item.value" v-for="item in CONTROLMODE"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="操作状态" style="width:220px">
          <el-select @clear="getTableList" clearable clear-table v-model="searchFrom.result"
            placeholder="请选择操作状态">
            <el-option :label="item.label" :value="item.value" v-for="item in CONTROLRESULT"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="DebounceGetTableList">搜索</el-button>
          <sj-button custom-type="sinfo" @click="DebounceResetting">重置</sj-button>
        </el-form-item>
      </el-form>
    </div>
    <div>
      <pure-table class="mt-5" :data="tableData.data" :columns="initPureTableConfig(roleTableConfig)" 
        @selection-change="selectionChange" :isShowPag="false">
        <template #operatePlatform="{ row }">
          <span>{{ isNullOrEmpty( CONTROLTYPETEXT[row.operatePlatform]?.label ) }}</span>
        </template>
        <template #operateResult="{ row }">
          <el-tag :type="CONTROLRESULTTEXT[row.operateResult]?.type">{{ isNullOrEmpty( CONTROLRESULTTEXT[row.operateResult]?.label ) }}</el-tag>
          <!-- <span>{{ isNullOrEmpty( NOTIFICATIONSTATUSTEXT[row.operateResult]?.label ) }}</span> -->
        </template>
      </pure-table>
      <div class="mt-5">
        <el-pagination v-model:current-page="searchFrom.page" v-model:page-size="searchFrom.limit" background
          :layout="PAGE_LAYOUT" :total="tableData.total" @size-change="getTableList" @current-change="getTableList" />
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
import {isNullOrEmpty,initPureTableConfig} from '@/utils/functions'
import { PAGE_LAYOUT } from '@/constant';
import { CONTROLMODE } from "@/constant/device-mangenment";
import { ref, reactive } from "vue";
import { NOTIFICATIONSTATUS, CONTROLRESULTTEXT, CONTROLTYPETEXT, CONTROLTYPE,CONTROLRESULT } from "@/constant/alarm-mangenment";
import {  debounce} from "@pureadmin/utils";
import { ElMessage, ElMessageBox } from "element-plus";
import { getControlRecord } from "@/api/screen/index";
const tableData = reactive({
  data: [],
  total: 0
});
const props = defineProps({
  deviceId: {
    type: String,
    default: ''
  }
})
const searchFrom = reactive({
  page: 1,
  limit: 10,
  operatePlatform: "",
  createdAt: [],
  startDate: "",
  endDate: "",
  result:null
});
const selectionData = ref([]);
const selectionChange = data => {
  selectionData.value = data;
};
const dateChange = e => {
  if (e) {
    searchFrom.startDate = e[0];
    searchFrom.endDate = e[1];
  } else {
    searchFrom.startDate = "",
      searchFrom.endDate = "",
      getTableList()
  }
};
const roleTableConfig = [
  // { type: "selection", align: "left" },
  { prop: "id", label: '编号', width:  100 },
  { prop: "operateContent", label: "操作内容" ,showOverflowTooltip:true },
  { prop: "operateIP", label: "操作IP" ,showOverflowTooltip:true },
  { slot: "operatePlatform", label: "控制方式" },
  { slot: "operateResult", label: "操作状态" },
  { prop: "operateParam", label: "操作参数"},
  { prop: "operateResultContent", label: "操作结果"},
  { prop: "operator", label: "操作人" },
  { prop: "createdAt", label: "操作时间", width: 180,}
  // { slot: "action", label: "操作", width: 150, fixed: "right" }
];
const defaultSearchForm = () => {
  return {
    operatePlatform: "",
    createdAt: [],
    startDate: "",
    endDate: "",
		page: 1,
    limit: 10,
  }
}
// 重置搜索栏
const resetting = () => {
  //点击重置按键
  Object.assign(searchFrom, defaultSearchForm());
  getTableList();
};
// 获取列表数据
const getTableList = () => {
  getControlRecord({ ...searchFrom, deviceId: props.deviceId }).then(res => {
    if (res.code === 200) {
      tableData.data = res.result.data;
      tableData.total = res.result.total;
    }
  });
};
getTableList()
const DebounceResetting = debounce(resetting, 1000, true);

const DebounceGetTableList = debounce(getTableList, 1000, true);
</script>
